<template>
  <div class="human">
    <div>
      <jc-button
        :btn-arr="['reload', 'save', 'remove', 'list']"
        :disab-arr="['using', 'close', 'cancel', 'com1', 'com2', 'chart', 'freeze']"
        :list="'/groupRoster'"
        @refresh="getUserList"
        @save="submit"
        @del="delDetail"
      />
    </div>
    <div>
      <span class="title-background">{{ $t('market.info') }}</span>
      <el-form ref="jxStaffRef" :model="jxStaff" size="mini" label-width="100px" :rules="jxStaffRules">
        <el-form-item label="公司主体" prop="fcompanyname">
          <el-select v-model="jxStaff.fcompanyname">
            <el-option label="惠州杰希制造公司" value="惠州杰希制造公司" />
            <el-option label="杰希智能（香港）有限公司" value="杰希智能（香港）有限公司" />
            <el-option label="摩洛哥餐椅制造公司(MAXWILL)" value="摩洛哥餐椅制造公司(MAXWILL)" />
            <el-option label="香港魔方盒子电子商务有限公司" value="香港魔方盒子电子商务有限公司" />
            <el-option label="广东麦斯威尔" value="广东麦斯威尔" />
            <el-option label="FA FURNITURE CO.,LIMITED" value="FA FURNITURE CO.,LIMITED" />
            <el-option label="惠州市东卓新材料科技有限公司" value="惠州市东卓新材料科技有限公司" />
            <el-option label="HK Maxwill" value="HK Maxwill" />
            <el-option label="JMK制造公司" value="JMK制造公司" />
            <el-option label="Atlas Sofa" value="Atlas Sofa" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="fname">
          <el-input v-model="jxStaff.fname" />
        </el-form-item>
        <el-form-item label="单位/部门" prop="fdepartmentid">
          <el-input v-model="jxStaff.deptname">
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="departVisiblit=true"
            />
          </el-input>
        </el-form-item>
        <el-form-item label="组别">
          <el-select v-model="jxStaff.fworkshopid">
            <el-option v-for="item in workshop" :key="item.fid" :label="item.fname" :value="item.fid" />
          </el-select>
        </el-form-item>
        <el-form-item label="现任职务" prop="fduties">
          <el-input v-model="jxStaff.fduties" />
        </el-form-item>
        <el-form-item label="计薪方式" prop="fwagemethod">
          <el-select v-model="jxStaff.fwagemethod">
            <el-option label="月薪" value="月薪" />
            <el-option label="计件" value="计件" />
          </el-select>
        </el-form-item>
        <el-form-item label="人员状态" prop="fstatusid">
          <el-select v-model="jxStaff.fstatusid">
            <el-option
              v-for="item in fstatusData"
              :key="item.fvalue"
              :label="item.fname"
              :value="item.fid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="fentrytime">
          <el-date-picker
            v-model="jxStaff.fentrytime"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
            @change="entryChange"
          />
        </el-form-item>
        <el-form-item label="转正时间" prop="fprobationtime">
          <el-date-picker
            v-model="jxStaff.fprobationtime"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="离职日期" prop="fterminationdate">
          <el-date-picker
            v-model="jxStaff.fterminationdate"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="工号" prop="fjobnumber">
          <el-input v-model="jxStaff.fjobnumber" />
        </el-form-item>
        <el-form-item label="工龄" prop="fseniority">
          <el-input v-model="jxStaff.fseniority" disabled />
        </el-form-item>
        <div style="width: 100%"><span class="title-background">个人信息</span></div>
        <el-form-item label="身份证号码" prop="fidcard">
          <el-input v-model="jxStaff.fidcard" @blur="cardChange(jxStaff.fidcard)" />
        </el-form-item>
        <el-form-item label="出生日期" prop="fdateofbirth">
          <el-date-picker
            v-model="jxStaff.fdateofbirth"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
            @change="birthChange"
          />
        </el-form-item>
        <el-form-item label="户籍地址" prop="fregistaddress">
          <el-input v-model="jxStaff.fregistaddress" />
        </el-form-item>
        <el-form-item label="年龄" prop="fage">
          <el-input-number v-model="jxStaff.fage" controls-position="right" />
        </el-form-item>
        <el-form-item label="性别" prop="fsex">
          <el-radio-group v-model="jxStaff.fsex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="fmaritalstatus">
          <el-radio-group v-model="jxStaff.fmaritalstatus">
            <el-radio label="已婚">已婚</el-radio>
            <el-radio label="未婚">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="民族" prop="fnation">
          <el-input v-model="jxStaff.fnation" />
        </el-form-item>
        <el-form-item label="政治面貌" prop="fpoliticaloutlook">
          <el-input v-model="jxStaff.fpoliticaloutlook" />
        </el-form-item>
        <el-form-item label="籍贯" prop="fnativeplace">
          <el-input v-model="jxStaff.fnativeplace" />
        </el-form-item>
        <el-form-item label="最高学历" prop="feducation">
          <el-select v-model="jxStaff.feducation">
            <el-option label="小学" value="小学" />
            <el-option label="初中" value="初中" />
            <el-option label="高中" value="高中" />
            <el-option label="中专" value="中专" />
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="研究生" value="研究生" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="毕业院校" prop="fgraduationschoolb">
          <el-input v-model="jxStaff.fgraduationschoolb" />
        </el-form-item>
        <el-form-item label="专业" prop="fspeciality">
          <el-input v-model="jxStaff.fspeciality" />
        </el-form-item>
        <el-form-item label="毕业日期" prop="fgraduationdate">
          <el-date-picker
            v-model="jxStaff.fgraduationdate"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="参加工作日期" prop="fstartworkingdate">
          <el-date-picker
            v-model="jxStaff.fstartworkingdate"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="fphonenumber">
          <el-input v-model="jxStaff.fphonenumber" />
        </el-form-item>
        <el-form-item label="紧急联系人" prop="femergencycontact">
          <el-input v-model="jxStaff.femergencycontact" />
        </el-form-item>
        <!--        <el-form-item label="与本人关系" prop="frelationship">-->
        <!--          <el-input v-model="jxStaff.frelationship" />-->
        <!--        </el-form-item>-->
        <el-form-item label="紧急联系人电话" prop="femergencycontactphone" label-width="120px">
          <el-input v-model="jxStaff.femergencycontactphone" />
        </el-form-item>
        <el-form-item label="现居住地" prop="flive">
          <el-input v-model="jxStaff.flive" />
        </el-form-item>
        <el-form-item label="银行卡信息">
          <el-input v-model="jxStaff.fcardinformation" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="jxStaff.fnote" />
        </el-form-item>
      </el-form>
      <span class="title-background">合同信息</span>
      <el-form :model="jxStaff" size="mini" label-width="120px">
        <el-form-item
          v-for="item in tableTong"
          :key="item.prop"
          :label="item.label"
          :label-width="item.labelWidth?item.labelWidth: ''"
        >
          <el-date-picker
            v-model="jxStaff[item.prop]"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </el-form-item>
      </el-form>
      <span class="title-background">员工资料</span>
      <el-form :model="jxStaff" size="mini" label-width="100px" :rules="jxStaffRules">
        <el-form-item
          v-for="item in tableLabel"
          :key="item.prop"
          :label="item.label"
          :prop="rules.includes(item.prop) ? item.prop : ''"
        >
          <jc-upload
            :image-url.sync="jxStaff[item.prop]"
            :required="false"
            class="spacing"
          />
        </el-form-item>
      </el-form>
    </div>
    <!--  部门-->
    <unit v-if="departVisiblit" msg="SX_V_WORKSHOP" @unit="selUnit" />
  </div>
</template>

<script>
import { deleteTJxStaff, queryGroupByDeptID, queryUserDetails, updateTJxStaff } from '@/api/resources'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import jcUpload from '@/components/Upload'
import jcButton from '@/components/Button'

export default {
  components: {
    jcUpload,
    jcButton,
    unit: () => import('@/components/unit')
  },
  data() {
    return {
      departVisiblit: false,
      jxStaff: {},
      workshop: [],
      tableLabel: [ // 员工资料
        { label: '应聘登记表', prop: 'fapplicationregistration' },
        { label: '身份证复印件', prop: 'fidcardimg' },
        { label: '毕业证复印件', prop: 'fdiplomaimg' },
        { label: '照片', prop: 'fimg' },
        { label: '学位证复印件', prop: 'facademicdegree' },
        { label: '转正申请表', prop: 'fregularworkersimg' },
        { label: '资格证复印件', prop: 'fqualificationimg' },
        { label: '其它资料', prop: 'fotherimg' }
      ],
      tableTong: [
        { label: '首次合同签订时间', prop: 'ffstartcontactdate' },
        { label: '首次合同到期时间', prop: 'ffendcontactdate' },
        { label: '二次合同签订时间', prop: 'fsstartcontactdate' },
        { label: '二次合同到期时间', prop: 'fsendcontactdate' },
        { label: '三次合同签订时间', prop: 'ftstartcontactdate' },
        { label: '三次合同到期时间', prop: 'ftendcontactdate' },
        { label: '无固定期限合同签订时间', prop: 'fnofixedcontactdate', labelWidth: '150px' }
      ],
      fstatusData: [],
      rules: ['fidcardimg'],
      jxStaffRules: { // 提交验证
        // fidcardimg: [{ required: true, trigger: 'change', message: '图片不能为空' }],
        // fdiplomaimg: [{ required: true, trigger: 'change', message: '图片不能为空' }],
        // fimg: [{ required: true, trigger: 'change', message: '图片不能为空' }]
      },
      // fprobationtime 转正时间 fterminationdate 离职日期
      ziduan: ['fcompanyname', 'fname', 'fdepartmentid', 'fduties', 'fstatusid', 'fidcard',
        'fentrytime', 'fpretaxsalary', 'femergencycontact',
        'fsex', 'fdateofbirth', 'fage', 'fnation', 'fmaritalstatus',
        'fregistaddress', 'fphonenumber', 'femergencycontactphone'
      ]
    }
  },
  created() {
    this.ziduan.forEach(res => {
      this.jxStaffRules[res] = [{ required: true, trigger: 'change' }]
    })
    this.fpaezDataType()
    if (this.$route.params.id) {
      this.getUserList()
    }
  },
  methods: {
    // 详情
    getUserList() {
      queryUserDetails({ fid: this.$route.params.id }).then(res => {
        if (res.code === 0) {
          this.jxStaff = res.data
          this.queryworkshop(this.jxStaff.fdepartmentid)
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    submit() {
      this.$refs.jxStaffRef.validate(valid => {
        if (!valid) {
          return false
        }
        // if (!this.jxStaff.fidcardimg && !this.jxStaff.fdiplomaimg && !this.jxStaff.fimg) {
        //   this.$confirm('员工资料-身份证复印件、毕业证复印件、照片是必选项。', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'error'
        //   })
        //   return
        // }
        updateTJxStaff({ jxStaff: this.jxStaff }).then(res => {
          if (res.code === 0) {
            this.getUserList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 员工状态
    async fpaezDataType() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_STAFF' })
      this.fstatusData = RES.list
    },
    // 部门
    selUnit(ev) {
      if (ev?.fid) {
        const item = this.jxStaff
        item.deptname = ev.fname
        item.fdepartmentid = ev.fid
        this.queryworkshop(ev.fid)
      }
      this.departVisiblit = false
    },
    // 组别workshop
    queryworkshop(deptId) {
      queryGroupByDeptID({ deptId }).then(res => {
        if (res.code === 0) {
          this.workshop = res.data
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除
    delDetail(ev) {
      this.$confirm('确定要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteTJxStaff({ fid: this.jxStaff.fid }).then(res => {
          if (res.code === 0) {
            this.$message({ showClose: true, message: res.message, type: 'success' })
            // 关闭当前页面
            this.$store.dispatch('tagsView/guanbi', this.$route)
            this.$router.push({
              path: '/groupRoster'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
          }
        })
      })
    },
    // 获取出生日期
    getBirthdayByIdCard(idCard) {
      if (idCard.length === 15) {
        return `19${idCard.substr(6, 2)}-${idCard.substr(8, 2)}-${idCard.substr(10, 2)}`
      } else if (idCard.length === 18) {
        return `${idCard.substr(6, 4)}-${idCard.substr(10, 2)}-${idCard.substr(12, 2)}`
      } else {
        return ''
      }
    },
    // 获取性别
    getGenderByIdCard(idCard) {
      const genderArr = ['女', '男']
      if (idCard.length === 15) {
        return genderArr[idCard.substr(14, 1) % 2]
      } else if (idCard.length === 18) {
        return genderArr[idCard.substr(16, 1) % 2]
      } else {
        return '男'
      }
    },
    MonthsBetw(date1, date2) {
      // 用-分成数组
      date1 = date1.split('-')
      date2 = date2.split('-')
      // 获取年,月数
      var year1 = parseInt(date1[0])
      var month1 = parseInt(date1[1])
      var year2 = parseInt(date2[0])
      var month2 = parseInt(date2[1])
      // 通过年,月差计算月份差
      var months = (year2 - year1) * 12 + (month2 - month1) + 1
      return months
    },
    entryChange(ev) {
      const time = new Date().toLocaleDateString().replaceAll('/', '-')
      const time1 = this.MonthsBetw(ev, time)
      this.jxStaff.fseniority = (time1 / 12).toFixed(0) + '年' + (time1 % 12) + '月'
    },
    cardChange(val) {
      const item = this.getBirthdayByIdCard(val)
      const item2 = this.getGenderByIdCard(val)
      this.jxStaff.fdateofbirth = item
      this.jxStaff.fsex = item2
      this.birthChange(item)
    },
    birthChange(val) {
      const year = new Date().getFullYear()
      const year1 = val.split('-')[0]
      this.jxStaff.fage = year - year1
    }
  }
}
</script>

<style scoped lang="scss">
.human {
  @include listBom;
  .title-background {
    border-left: none;
  }
  .el-form{
    display: flex;
    flex-wrap: wrap;
    .el-form-item{
      width: 19.8%;
      min-width: 238px;
      margin-bottom: 5px;
      .el-input, .el-select, .el-date-picker, .el-input-numbe {
        width: 100%;
        min-width: 138px!important;
      }
    }
  }
}

</style>
